<template>
    <div id="map"></div>
</template>

<script setup>
import { onMounted } from "vue";
import { app } from "@/main";

import { mapServer } from "@/api/server";

const tiandituKey = import.meta.env.VITE_TIANDITU_KEY;
onMounted(() => {
    // 影像地图
    const imageLayer = new ol.layer.Tile({
        title: "影像底图",
        source: new ol.source.XYZ({
            url: `http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${tiandituKey}`,
            wrapX: false,
            crossOrigin: "Anonymous",
        }),
        // zIndex: 12
    });
    /* 瓦片图层 */
    const vectorLayer = new ol.layer.Tile({
        title: "矢量底图",
        source: new ol.source.XYZ({
            url: `http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${tiandituKey}`,
            wrapX: false,
            crossOrigin: "Anonymous",
        }),
    });

    //注记图层
    const markerLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: `http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${tiandituKey}`,
            attributions: "天地图",
            wrapX: false,
            crossOrigin: "Anonymous",
        }),
    });

    /* 实例化地图 */
    const map = new ol.Map({
        target: "map",
        layers: [imageLayer, vectorLayer, markerLayer],
        view: new ol.View({
            center: [114.36, 30.5],
            zoom: 12,
            projection: "EPSG:4326",
            maxZoom: 18,
            minZoom: 11,
        }),
    });

    setTimeout(() => {
        map.getView().animate({
            center: [114.36, 30.5],
            zoom: 13.1,
            duration: 1500,
        });
    }, 300);

    // 添加mapgis服务
    const docLayer = new Zondy.Map.Doc("" /* 地图文档地址 */, "guanggu", {
        ip: mapServer.ip,
        // ip:'localhost',
        // port: 6163,
        //端口号为空
        port: mapServer.port,
        crossOrigin: "Anonymous",
    });

    //获取数据源
    const source = docLayer.getSource();
    // console.log(source,'source');
    //设置跨域访问
    // source.crossOrigin_= "Anonymous";

    // //设置图层title,用于图层管理
    docLayer.set("title", "mapgis图层");

    map.addLayer(docLayer);
    app.config.globalProperties.$map = map;
});
</script>

<style scoped>
#map {
    width: 100vw;
    height: 100vh;
}
</style>
